<template>
    <el-container>
        <el-header>
            <h2>图书查询</h2>
        </el-header>
        <el-main>
            <br>
            <!-- 读取学生卡：{{ stuid }} -->
            <br>
            <el-input v-model="inputbookid" placeholder="请输入图书id" style="width: 150px;  "></el-input>
            <el-popover placement="bottom" width="500" trigger="click">
                <el-table :data="gridData" style="width: 500;">
                    <el-table-column prop="bookid" label="书号" width="180">
                    </el-table-column>
                    <el-table-column prop="bookname" label="书名">
                    </el-table-column>
                    <el-table-column prop="booklocation" label="书的位置">
                    </el-table-column>
                    <el-table-column prop="booknums" label="书的数量">
                    </el-table-column>
                </el-table>
                <el-button slot="reference" @click="borrow">查询图书</el-button>
            </el-popover>
            <div class="chart-container" id="line">
                <!-- <el-button type="primary" @click="save">导出数据</el-button>
                <el-button type="primary" @click="read">导入数据</el-button> -->
            </div>

        </el-main>
    </el-container>


</template>

<script>
import * as echarts from 'echarts';
import { setInterval } from 'core-js';
const axios = require('axios');
import { websocket } from '@/utils/websocket';
var sendMeg;
var Meg;
export default {
    data() {
        return {
            rfid: "",
            gridData: [],
            inputbookid: "",
            begindate:"",
            enddate:"",
        }
    },
    // mounted(){
    //        // 在页面加载完成后，初始化图表和获取数据
    //         this.initChart();

    // },
    computed: {
    },
    watch: {//监听错误次数变化


    },
    created() {

        // // 使用 setInterval 设置定时器
        // this.timer = setInterval(() => {
        //     // 定时向数据库中获取数据
        //     axios.get('http://localhost:8888/listcount').then((result) => {
        //         console.log(result.data);
        //         for (let i = 0; i < result.data.data.length; i++) {
        //             this.options.series[0].data[i] = result.data.data[i].num;
        //             this.options.xAxis.data[i] = result.data.data[i].bookname;
        //         }
        //         console.log(result);
        //     })
        //     this.maychart.setOption(this.options);
        //     console.log('定时器触发');
        // }, 1000); // 每隔 1 秒执行一次
        this.initWecSocket();
    },
    methods: {
        handleFileSelect(event) {
            // 获取用户选择的文件列表
            const selectedFiles = event.target.files;
            console.log(selectedFiles);
            const reader = new FileReader();
            reader.onload = (e) => {
                // 获取文件内容
                const fileContent = e.target.result;
                console.log('文件内容：', fileContent);
            };

            // 遍历文件列表
            for (let i = 0; i < selectedFiles.length; i++) {
                const file = selectedFiles[i];

                // 创建 FileReader 对象
                const reader = new FileReader();

                // 设置 FileReader 加载完成时的回调函数
                reader.onload = (e) => {
                    // 获取文件内容
                    const fileContent = e.target.result;
                    var option = JSON.parse(fileContent)
                    this.maychart.setOption(option);

                };

                // 读取文件内容
                reader.readAsText(file);

            }
        },
        initChart() {
            // 定义图表配置项
            this.options = {
                title: {
                    text: '历史数据分析'
                },
                //设置鼠标悬停在数据点上时显示的提示框
                tooltip: {
                    trigger: 'axis'
                },
                //设置图例，用于展示不同数据系列的标签，
                legend: {
                    data: ['被借阅次数']
                },
                //设置图表的网格，包括左侧边距、右侧边距、底部边距和是否包含标签等属性
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [7]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '被借阅次数',
                        type: 'bar',
                        data: []
                    },
                

                ]
            };
            // 初始化图表实例
            this.maychart = echarts.init(document.getElementById('line'));
            // 使用配置项初始化图表
            this.maychart.setOption(this.options);
        },
        read() {
            axios.get("http://localhost:8080/input")
        },
        save() {
            var option = this.maychart.getOption()
            var json = JSON.stringify(option)
            console.log(json);
            axios({
                url: "http://localhost:8080/saveOption",
                method: 'post',
                data: option
            })
        },
        borrow: function () {
            axios.get('http://localhost:8888/listbybookid?bookid=' + this.inputbookid)
                .then(response => {
                    // 处理请求成功的数据
                    console.log(response.data);
                    this.gridData = response.data.data;
                })
                .catch(error => {
                    // 处理请求错误
                    console.error(error);
                });
            // 在页面加载完成后，初始化图表和获取数据
            this.initChart();
            // 使用 setInterval 设置定时器
            this.timer = setInterval(() => {
                // 定时向数据库中获取数据
                axios.get('http://localhost:8888/listfindbybookid?bookid=' + this.inputbookid).then((result) => {
                    console.log(result.data);
                    for (let i = 0; i < result.data.data.length; i++) {
                        this.options.series[0].data[i] = result.data.data[i].num;
                        this.options.xAxis.data[i] = result.data.data[i].bookname;
                    }
                    console.log(result);
                })
                this.maychart.setOption(this.options);
                console.log('定时器触发');
            }, 1000); // 每隔 1 秒执行一次
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
            if(event.data.substring(0,6) == "HWRFID"){
                this.rfid = event.data.substring(6,event.data.length - 1)
            }
        },

    }

}
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>